<!-- 1 template  -->
<template>
  <div>
    <h3>user信息:</h3>
    <div>user.name: {{ user.name }}</div>
    <div>user.age: {{ user.age }}</div>
    <div>
      <button @click="changeName">修改name</button>
      <button @click="changeAge">修改age</button>

    </div>

  </div>

  <div>
    <h3>Person信息:</h3>
    <div>person.name: {{ person.name }}</div>
    <div>person.age: {{ person.age }}</div>
    <div>
      <button @click="changePersonName">修改name</button>
      <button @click="changePersonAge">修改age</button>

    </div>


    <div>
      基础数据类型 使用ref 定义 num: {{ num }}
    </div>
  </div>
</template>

<!-- 2 script -->
<script setup lang="ts" name='App'>
import { ref, reactive } from "vue";

//除了使用ref 定义数据 ，

//还可以使用 reactive 定义数据 
// reactive 可以定义对象和数组

let num = ref(10)


let user = reactive({
  name: 'zhangsan',
  age: 18
})

let person = ref({
  name: 'zhangsan',
  age: 18
})


function changeName() {
  console.log("user", user);

  user.name = user.name + '~'
}
function changeAge() {
  user.age++
}


function changePersonName() {
  console.log("person", person);

  person.value.name = person.value.name + '~'
}
function changePersonAge() {
  person.value.age++
}



</script>

<!-- 3 style -->
<style scoped></style>